<template>
	<view class="container">
		<view class="user-info">
			<view class="user-info-avatar">
				<u-avatar :src="avatar" size="80"></u-avatar>
			</view>
			<view v-if="!isLogin" class="user-info-name" @click="handleLogin()">
				<text style="font-size: 17px; margin-top: 16%">去登录</text>
			</view>
			<view v-if="isLogin" class="user-info-name">
				<text style="font-size: 20px; margin-top: 6%; font-weight: bold">{{ user.nickName }}</text>
				<text style="margin-top: 6%; color: grey; font-size: 11px">读万卷书，行万里路</text>
			</view>
			<view v-if="isLogin" class="user-info-editInfo">
				<view style="margin-top: 15%">
					<u-button text="编辑资料" @click="handleSwitchPath('/myself/personal-information/index')"></u-button>
				</view>
			</view>
		</view>
		<view v-if="user.isMember === 0" class="user-member">
			<view style="width: 50%">
				<text style="margin-left: 10%; color: #ffffff; font-size: 18px">会员卡尚未开通</text>
			</view>
			<view style="width: 45%; display: flex; align-items: center; justify-content: flex-end">
				<text style="color: #ffffff" @click="handleOpenMemberList()">立即开通 ></text>
			</view>
		</view>
		<view v-if="user.isMember === 1" class="user-member">
			<view style="width: 100%;height: 5%;">
				<text style="margin-left: 5%; margin-top: 50%; color: #ffffff; font-size: 18px">
					{{user.memberEndDate}} 到期</text>
			</view>

		</view>
		<view style="display: flex; align-items: flex-start; width: 90%; margin-top: 7%">
			<u-cell-group>
				<u-cell icon="star-fill" title="我的收藏" isLink url="/myself/collection/index"></u-cell>
				<u-cell v-if='constant == 1' icon="order" title="订单管理" isLink
					url="/order/goodsOrderList/index"></u-cell>
				<u-cell v-if='constant == 2' icon="order" title="订单管理" isLink url="/order/orderList/index"></u-cell>
				<u-cell icon="map-fill" title="地址管理" isLink url="/myself/address/index"></u-cell>
				<u-cell icon="file-text-fill" title="小店信息" isLink url="/myself/shop-info/index"></u-cell>
				<u-cell icon="coupon-fill" title="积分商城" isLink @click="changePointsMall"></u-cell>
				<u-cell icon="coupon-fill" title="客服中心" isLink @click="changePointsMall"></u-cell>
			</u-cell-group>
		</view>
		<view>
			<u-modal content="您当前尚未缴纳押金，缴纳押金后可享借阅权益，是否确认缴纳押金？" :show="show" showCancelButton closeOnClickOverlay
				@confirm="confirmPayDeposit" @cancel="cancel()" @close="cancel()"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		getInfo
	} from '@/api/login';
	import {
		checkDeposit
	} from '@/api/system/user'
	import {
		createPreOrder
	} from '@/api/order';

	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import constant from '@/utils/constant'
	export default {
		data() {
			return {
				expirationTime: '',
				show: false,
				user: {},
				isLogin: false,
				avatar: 'https://www.taotaohomecraft.press/prod-api/profile/tao_logo.jpg',
				constant: '1'
			};
		},
		onShow() {
			this.constant = constant.type
			this.getUser();
			this.handleCheckDeposit();
		},
		// mounted() {
		// 	this.handleCheckDeposit();
		// 	this.getUser();
		// },
		onPullDownRefresh() {
			console.log("下拉刷新触发");
			// 模拟数据请求
			setTimeout(() => {
				this.getUser();
				this.handleCheckDeposit();
				uni.stopPullDownRefresh(); // 停止刷新动画（必须调用！）
			}, 1000);
		},
		methods: {
			getUser() {
				getInfo().then((response) => {
					console.log(response.data.user);
					this.user = response.data.user;
					this.isLogin = true;
				});
			},
			async handleCheckDeposit() {
				const res = await checkDeposit();
				if (res.code === 200) {
					if (res.isMember === 0) {
						uni.showToast({
							title: '您还不是会员，成为会员后即可借阅图书！',
							icon: 'none',
							duration: 2000
						})
					}
					this.expirationTime = res.expirationTime
					if (res.isDeposit === 0) {
						this.show = true
					}
				}
			},
			handleOpenMemberList() {
				uni.navigateTo({
					url: '/myself/member/index'
				});
			},
			handleLogin() {
				uni.reLaunch({
					url: '/pages/login' // 单个属性无需逗号
				});
			},
			handleSwitchPath(path) {
				uni.navigateTo({
					url: path + `?data=${encodeURIComponent(JSON.stringify(this.user))}`
				});
			},
			cancel() {
				this.show = false
			},
			changePointsMall() {
				uni.showToast({
					title: '正在建设中~~',
					icon: 'none',
					duration: 2500
				});
			},
			async confirmPayDeposit() {
				let data = {
					totalPrice: 100,
					goodsName: '押金储值',
					type: '2'
				}
				const res = await createPreOrder(data);
				if (res.code === 200) {
					console.log("预下单成功", res)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.prepayId,
						signType: 'RSA',
						paySign: res.data.paySign,
						success: function(res) {
							console.log(res)
							uni.showToast({
								title: '支付成功',
								duration: 1000
							});
							this.show = false;
							this.getUser()
						},
						fail: function(err) {
							console.log(err)
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2500
							});
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.user-info {
		width: 90%;
		display: flex;
		/* justify-content: center; */
		height: 12%;
		margin-top: 5%;
	}

	.user-info-avatar {
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user-info-name {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		width: 50%;
	}

	.user-info-editInfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		ustify-content: center;
		width: 25%;
	}

	.user-member {
		width: 90%;
		margin-top: 5%;
		background-image: url('https://www.taotaohomecraft.press/prod-api/profile/member.png');
		height: 14%;
		border-radius: 10px;
		display: flex;
		align-items: center;
		/* 新增以下属性 */
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
</style>